<html>
<head>
  <title>The source code</title>
    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
</head>
<body  onload="prettyPrint();">
    <pre class="prettyprint lang-js"><div id="cls-Ext.layout.BoxLayout"></div>/**
 * @class Ext.layout.BoxLayout
 * @extends Ext.layout.ContainerLayout
 * <p>Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.</p>
 */
Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {
    // private
    monitorResize:true,
    scrollOffset : 0,
    extraCls: 'x-box-item',
    ctCls: 'x-box-layout-ct',
    innerCls: 'x-box-inner',

    <div id="cfg-Ext.layout.BoxLayout-defaultMargins"></div>/**
     * @cfg {Object} defaultMargins
     * If the individual contained items do not have a <tt>margins</tt> property specified, the margins
     * from this object literal representing the default margins will be applied to each item. Defaults
     * to <tt>{left:0,top:0,right:0,bottom:0}</tt>.
     */
    defaultMargins : {left:0,top:0,right:0,bottom:0},
    <div id="cfg-Ext.layout.BoxLayout-padding"></div>/**
     * @cfg {String} padding
     * Defaults to <tt>'0'</tt>. Sets the padding to be applied to all child items managed by this
     * container's layout. 
     */
    padding:'0',
    pack: 'start',

    // private
    isValidParent : function(c, target){
        return c.getEl().dom.parentNode == this.innerCt.dom;
    },

    // private
    onLayout : function(ct, target){
        var cs = ct.items.items, len = cs.length, c, i, last = len-1, cm;

        if(!this.innerCt){
            target.addClass(this.ctCls);

            // the innerCt prevents wrapping and shuffling while
            // the container is resizing
            this.innerCt = target.createChild({cls:this.innerCls});
            this.padding = this.parseMargins(this.padding); 
        }
        this.renderAll(ct, this.innerCt);
    },

    // private
    renderItem : function(c){
        if(typeof c.margins == 'string'){
            c.margins = this.parseMargins(c.margins);
        }else if(!c.margins){
            c.margins = this.defaultMargins;
        }
        Ext.layout.BoxLayout.superclass.renderItem.apply(this, arguments);
    },

    getTargetSize : function(target){
        return (Ext.isIE6 && Ext.isStrict && target.dom == document.body) ? target.getStyleSize() : target.getViewSize();
        //return Ext.isIE && target.dom != Ext.getBody().dom ? target.getStyleSize() : target.getViewSize();
    }

    <div id="prop-Ext.layout.BoxLayout-activeItem"></div>/**
     * @property activeItem
     * @hide
     */
});

<div id="cls-Ext.layout.VBoxLayout"></div>/**
 * @class Ext.layout.VBoxLayout
 * @extends Ext.layout.BoxLayout
 * A layout that arranges items vertically
 */
Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, {
    <div id="cfg-Ext.layout.VBoxLayout-align"></div>/**
     * @cfg {String} align
     * Controls how the child items of the container are aligned. Acceptable configuration values for this
     * property are:
     * <div class="mdetail-params"><ul>
     * <li><b><tt>left</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned horizontally
     * at the <b>left</b> side of the container</div></li>
     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are aligned horizontally at the
     * <b>mid-width</b> of the container</div></li>
     * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched horizontally to fill
     * the width of the container</div></li>
     * <li><b><tt>strechmax</tt></b> : <div class="sub-desc"> </div></li>
     * </ul></div>
     */
    align: 'left', // left, center, stretch, strechmax
    <div id="cfg-Ext.layout.VBoxLayout-pack"></div>/**
     * @cfg {String} pack
     * Controls how the child items of the container are packed together. Acceptable configuration values
     * for this property are:
     * <div class="mdetail-params"><ul>
     * <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at
     * <b>top</b> side of container</div></li>
     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at
     * <b>mid-height</b> of container</div></li>
     * <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>bottom</b>
     * side of container</div></li>
     * </ul></div>
     */
    pack: 'start',
    <div id="cfg-Ext.layout.VBoxLayout-flex"></div>/**
     * @cfg {Number} flex
     * This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed
     * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>vertically</b>
     * according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with
     * a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or
     * <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
     */

    // private
    onLayout : function(ct, target){
        Ext.layout.VBoxLayout.superclass.onLayout.call(this, ct, target);

                var cs = ct.items.items, len = cs.length, c, i, last = len-1, cm,
            size = this.getTargetSize(target),
            w = size.width - target.getPadding('lr') - this.scrollOffset,
            h = size.height - target.getPadding('tb'),
            l = this.padding.left, t = this.padding.top;
            
        if ((Ext.isIE && !Ext.isStrict) && (w < 1 || h < 1)) {
            return;
        } else if (w < 1 && h < 1) {
            return;
        }
        var totalFlex = totalHeight = 0;
        for(i = 0; i < len; i++){
            c = cs[i];
            cm = c.margins;
            totalFlex += c.flex || 0;
            totalHeight += c.getHeight() + cm.top + cm.bottom;
        }
        var ch, extraHeight = h - totalHeight - this.padding.top - this.padding.bottom, allocated = 0;
        if(this.pack == 'center'){
            t += extraHeight ? extraHeight/2 : 0;
        }else if(this.pack == 'end'){
            t += extraHeight;
        }
        for(i = 0; i < len; i++){
            c = cs[i];
            cm = c.margins;
            ch = c.getHeight();
            t += cm.top;
            c.setPosition(l + cm.left, t);
            if(this.pack == 'start' && c.flex){
                var ratio = c.flex/totalFlex, add = Math.floor(extraHeight*ratio);
                allocated += add;
                add += (i == last) ? (extraHeight-allocated) : 0;
                ch += add;
                c.setHeight(ch);
            }
            t += ch + cm.bottom;
        }
        var stretchWidth = w - (this.padding.left + this.padding.right),
            maxWidth = 0;
        for(i = 0; i < len; i++){
            c = cs[i];
            cm = c.margins;
            maxWidth = Math.max(maxWidth, c.getWidth() + cm.left + cm.right);
        }
        var innerCtWidth = maxWidth + this.padding.left + this.padding.right;
        switch(this.align){
            case 'stretch':
                this.innerCt.setSize(w, h);
                break;
            case 'stretchmax':
            case 'left':
                this.innerCt.setSize(innerCtWidth, h);
                break;
            case 'center':
                this.innerCt.setSize(w = Math.max(w, innerCtWidth), h);
                break;
        }
        var availableWidth = w - this.padding.left - this.padding.right;
        for(i = 0; i < len; i++){
            c = cs[i];
            if(this.align == 'center'){
                var diff = availableWidth - (c.getWidth() + cm.left + cm.right);
                if(diff > 0){
                    c.setPosition(l + cm.left + (diff/2), c.y);
                }
            }else if(this.align == 'stretch'){
                c.setWidth((stretchWidth - (cm.left + cm.right)).constrain(
                    c.minWidth || 0, c.maxWidth || 1000000));
            }else if(this.align == 'stretchmax'){
                c.setWidth((maxWidth - (cm.left + cm.right)).constrain(
                    c.minWidth || 0, c.maxWidth || 1000000));
            }
        }
    }
    <div id="prop-Ext.layout.VBoxLayout-activeItem"></div>/**
     * @property activeItem
     * @hide
     */
});

Ext.Container.LAYOUTS['vbox'] = Ext.layout.VBoxLayout;

<div id="cls-Ext.layout.HBoxLayout"></div>/**
 * @class Ext.layout.HBoxLayout
 * @extends Ext.layout.BoxLayout
 * A layout that arranges items horizontally
 */
Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, {
    <div id="cfg-Ext.layout.HBoxLayout-align"></div>/**
     * @cfg {String} align
     * Controls how the child items of the container are aligned. Acceptable configuration values for this
     * property are:
     * <div class="mdetail-params"><ul>
     * <li><b><tt>top</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned vertically
     * at the <b>left</b> side of the container</div></li>
     * <li><b><tt>middle</tt></b> : <div class="sub-desc">child items are aligned vertically at the
     * <b>mid-height</b> of the container</div></li>
     * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched vertically to fill
     * the height of the container</div></li>
     * <li><b><tt>strechmax</tt></b> : <div class="sub-desc"> </div></li>
     * </ul></div>
     */
    align: 'top', // top, middle, stretch, strechmax
    <div id="cfg-Ext.layout.HBoxLayout-pack"></div>/**
     * @cfg {String} pack
     * Controls how the child items of the container are packed together. Acceptable configuration values
     * for this property are:
     * <div class="mdetail-params"><ul>
     * <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at
     * <b>left</b> side of container</div></li>
     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at
     * <b>mid-width</b> of container</div></li>
     * <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>right</b>
     * side of container</div></li>
     * </ul></div>
     */
    pack: 'start',
    <div id="cfg-Ext.layout.HBoxLayout-flex"></div>/**
     * @cfg {Number} flex
     * This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed
     * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>horizontally</b>
     * according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with
     * a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or
     * <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
     */

    // private
    onLayout : function(ct, target){
        Ext.layout.HBoxLayout.superclass.onLayout.call(this, ct, target);
        var cs = ct.items.items, len = cs.length, c, i, last = len-1, cm,
            size = this.getTargetSize(target),
            w = size.width - target.getPadding('lr') - this.scrollOffset,
            h = size.height - target.getPadding('tb'),
            l = this.padding.left, t = this.padding.top;
            
        if ((Ext.isIE && !Ext.isStrict) && (w < 1 || h < 1)) {
            return;
        } else if (w < 1 && h < 1) {
            return;
        }
        var totalFlex = totalWidth = 0;
        for(i = 0; i < len; i++){
            c = cs[i];
            cm = c.margins;
            totalFlex += c.flex || 0;
            totalWidth += c.getWidth() + cm.left + cm.right;
        }
        var cw, extraWidth = w - totalWidth - this.padding.left - this.padding.right, allocated = 0;
        if(this.pack == 'center'){
            l += extraWidth ? extraWidth/2 : 0;
        }else if(this.pack == 'end'){
            l += extraWidth;
        }
        for(i = 0; i < len; i++){
            c = cs[i];
            cm = c.margins;
            cw = c.getWidth();
            l += cm.left;
            c.setPosition(l, t + cm.top);
            if(this.pack == 'start' && c.flex){
                var ratio = c.flex/totalFlex, add = Math.floor(extraWidth*ratio);
                allocated += add;
                add += (i == last) ? (extraWidth-allocated) : 0;
                cw += add;
                c.setWidth(cw);
            }
            l += cw + cm.right;
        }
        var stretchHeight = h - (this.padding.top + this.padding.bottom),
            maxHeight = 0;
        for(i = 0; i < len; i++){
            c = cs[i];
            cm = c.margins;
            maxHeight = Math.max(maxHeight, c.getHeight() + cm.top + cm.bottom);
        }
        var innerCtHeight = maxHeight + this.padding.top + this.padding.bottom;
        switch(this.align){
            case 'stretch':
                this.innerCt.setSize(w, h);
                break;
            case 'stretchmax':
            case 'top':
                this.innerCt.setSize(w, innerCtHeight);
                break;
            case 'middle':
                this.innerCt.setSize(w, h = Math.max(h, innerCtHeight));
                break;
        }
        var availableHeight = h - this.padding.top - this.padding.bottom;
        for(i = 0; i < len; i++){
            c = cs[i];
            if(this.align == 'middle'){
                var diff = availableHeight - (c.getHeight() + cm.top + cm.bottom);
                if(diff > 0){
                    c.setPosition(c.x, t + cm.top + (diff/2));
                }
            }else if(this.align == 'stretch'){
                c.setHeight((stretchHeight - (cm.top + cm.bottom)).constrain(
                    c.minHeight || 0, c.maxHeight || 1000000));
            }else if(this.align == 'stretchmax'){
                c.setHeight((maxHeight - (cm.top + cm.bottom)).constrain(
                    c.minHeight || 0, c.maxHeight || 1000000));
            }
        }
    }

    <div id="prop-Ext.layout.HBoxLayout-activeItem"></div>/**
     * @property activeItem
     * @hide
     */
});

Ext.Container.LAYOUTS['hbox'] = Ext.layout.HBoxLayout;
</pre>    
</body>
</html>